1 آدرس:تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک

Transcription

1 1

2 الرحیم الرحمن اهلل بسم آموزشگاه داده تحلیل نویسی برنامه مرکز ترین تخصصی ایران در ودیتابیس به گام آموزش کتاب گام AngularJS فارسی زبان به رفوآ افشین مهندس مولف 2

3 تقدیم به نائب امام عصر آیت اهلل خامنه ای که عصا زدنش ضرب آهنگ حیدری دارد. تقدیم به همه جویندگان علم که توان و امکان شرکت در کالس های حضوری ما را ندارند. 3

4 مقدمه... 9 توجه :... 9 آموزش کتابخانه ی...AngularJS 01 نمونه ای از کاربرد :AngularJS آنچه که باید از قبل بدانید: پیشینه ی چارچوب کاری... AngularJS 00 مقدمه ای بر... AngularJS 00 مثالی از 01...AngularJS 01...AngularJS های Directive عبارت ها (expression)... AngularJS 01 برنامه های )application(...angularjs 01 عبارت ها/ Expression در... AngularJS 01 اعداد در...AngularJS 01 رشته ها در...AngularJS 01 اشیا در... AngularJS 01 آرایه ها در...01 AngularJS مقایسه عبارات در Angularjs و...01 JavaScript AngularJS در Modules یک ماژول به همراه یک کنترگر قرار دادن ماژول ها و کنترلگرها در فایل های جدا توابع می توانند فضاهای نامی سراسری را تخریب کنند زمان بارگذاری کتابخانه AngularJS ها در Directives Angular Directives اتصال داده Binding( )Data تکرار کردن المان های... HTML 11 4

5 دستور... ng-app 11 دستورin-init دستور... ng-model 11 دستور...ng-repeat 11 دایرکتیو... AngularJS ng-model 11 دایرکتیو... ng-model 11 پیوند دو طرفه اعتبارسنجی مقدار input کاربر وضعیت یک برنامه کاربردی Status( )Application کالس های... CSS 11 لیست انتخاب )Dropdown( در...11 AngularJS ساختن یک dropdown با استفاده از...11 ng-options مقایسه ng-options با ng-repeat برای چه باید استفاده کنیم منبع داده) Source )Data به صورت یک...11 object AngularJS در Controllerها 19...AngularJS Controllers تشریح برنامه ی فوق متدهای کنترلگر تعریف کنترلگرها در فایل های خارجی مثال دیگر محدوده )Scope( در... AngularJS 11 چگونه از Scope استفاده کنیم درک کردن...Scope 11 Scope خود را بشناسید المان هر به همان objectتکرارشونده دسترسی دارد. در این مورد یک رشته با x نشان داده شده است Scope ریشه فیلترها در... AngularJS 11 5

6 افزودن فیلتر به عبارت ها...11 فیلتر currency افزودن فیلتر به Directive ها فیلتر کردن ورودی سرویس های... AngularJS 11 سرویس چیست چرا از سرویس ها استفاده می کنیم...19 سرویس 19...$http سرویس $timeout سرویس $interval ساختن سرویس شخصی استفاده کردن از یک سرویس دلخواه داخل یک فیلتر $http و سرویس AngularJS فراهم کردن دادن داده ها AngularJSیک $http سرویس اصلی است که برای خواندن اطالعات از سرویس دهنده های وب کاربرد دارد جداول در... AngularJS 11 نمایش دادن داده ها در جدول نمایش دادن اطالعات به وسیله ی استایل... css 11 نمایش دادن به وسیله ی فیلتر 11...uppercase نشان دادن اندیس جدول) index $( استفاده از $even و $odd Twitter Bootstrap و AngularJS 10...BootStrap کد... HTML 10 شرح دستورات بکار رفته در نمونه ی فوق...11 تشریح کالس های... bootsrap 11 کد جاوا اسکریپت شرح کد جاوا اسکریپت

7 11...SQL واکشی و خواندن اطالعات از پایگاه داده AngularJS نمونه هایی از کد سرور درخواست های HTTP از چندین سایت/ cross-site کد سرور PHP و... MySQL 11.1 کد سرور PHP و MS Access.1 کد سرور VB Razor ASP.NET و SQL Lite.1 کد سرور VB Razor ASP.NET و...SQL Lite 11 مدل شی گرای سند DOM HTML در...AngularJS 11 دستور ng-disabled دستور... ng-show 11 دستور... ng-hide 11 رخدادها در...11 angularjs دستور ng-click پنهان سازی المان های...11 HTML نمایش دادن عناصر... HTML 11 فرم ها در...11 AngularJS کنترل های...11 HTML فرم های... HTML 11 نمونه ای از فرم... AngularJS 11 اعتبارسنجی ورودی در...11 AngularJS 11...Input Validation کد برنامه ی نمونه رابط برنامه سازی کاربردی )API( در... AngularJS AngularJS ی سراسری API نمونه ای از کاربرد تابع angular.lowercase)(...11 نمونه ای از تابع angular.uppercase()...11 نمونه ای از تابع angular.isstring() تابع angular.isnumber() 7

8 11... W3.CSS و AngularJS W3.CSS کد HTML توضیح Directiveهای استفاده شده در مثال باال توصیف کالس های 11...W3.CSS کد JavaScript توضیح کدهای... Java Script AngularJS در Includes تزریق کد AngularJS به همراه...11 HTML انیمیشن... AngularJS 11 انیمیشن چیست به چه چیزهایی نیاز داریم nganimate چه کاری انجام می دهد انیمیشن به استفاده از 19...CSS خاصیت انتقال (Transition) CSS ها خاصیت CSS Animation ها برنامه ی تحت وب...19 AngularJS نمونه ای از یک برنامه ی...11 AngularJS اسکلت و ساختار برنامه ی کاربردی...AngularJS 10 چکیده برنامه چگونه کار می کند

9 مقدمه زکات علم نشر آن است. حضرت علی)ع( موسسه آموزشی تحلیل داده با حضور جمعی از متخصصین مجرب در زمینه برنامه نویسی در نظر دارد مطالب آموزشی خود را در قالب کتاب های آموزشی و فیلم به صورت رایگان در دسترس عموم قرار دهد تا حتی آن دسته از عزیزانی که بنا به دالیل مالی مسافت جغرافیایی و یا نداشتن وقت کافی امکان شرکت در دوره های حضوری برای آنها میسر نیست از یادگیری بی بهره نمانند. عالوه بر این عالقه مندان می توانند با ثبت نام در انجمن سایت تحلیل داده سواالت خود را مطرح نموده و مدرسین آموزشگاه و اعضای انجمن در اسرع وقت پاسخ های خود را حتی االمکان به صورت فیلم در دسترس عموم قرار دهند. لذا از کلیه فعاالن در این زمینه دعوت می شود در این حرکت جمعی در کنار ما باشند و با حضور فعال خود در انجمن گام موثری در بهبود سطح علمی جوانان کشور عزیزمان ایران بردارند. توجه : برای دانلود سورس کد مثال های کتاب در بخش مقاالت سایت به آموزش SPA در آدرس مراجعه فرمایید. 9

10 آموزش کتابخانه ی AngularJS AngularJS یک کتابخانه ی جاوا اسکریپت است که قابلیت های جدید به HTML اضافه می کند. AngularJS برای کار با SPA بسیار مناسب می باشد. یادگیری آن بسیار آسان است. مقاله ی حاضر برای آموزش سریع و کاربردی AngularJS تنظیم و طراحی شده است. در ابتدا به آموزش اصول و مبانی این framework همانند: directive ها expression ها filter ها module ها و سرانجام controller ها می پردازیم. سپس به شرح مسائل پیچیده تر که برای کار با AngularJS غیره.... به آن ها نیاز دارید خواهیم پرداخت از جمله: Event ها Form ها http Validation Input و نمونه ای از کاربرد :AngularJS <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app=""> <p>input something in the input box:</p> <p>name : <input type="text" ng-model="name" placeholder="enter name here"></p> <h1>hello {{name</h1> </html> آنچه که باید از قبل بدانید: قبل از اینکه شروع به یادگیری کتابخانه ی AngularJS نمایید شما بایستی یک دانش ابتدایی از موارد زیر داشته باشید: HTML 10

11 CSS JavaScript پیشینه ی چارچوب کاری AngularJS ویرایش 0.1 کتابخانه ی حاضر برای اولین بار در سال 1101 منتشر شد. در سال 1119 یکی از کارمندان گوگل " Hevery " Miško کار بر روی کتابخانه ی مزبور را آغاز کرد. این فکر با موفقیت به بار نشسته و سرانجام پروژه بطور رسمی توسط شرکت گوگل پشتیبانی می شود. مقدمه ای بر AngularJS همان طور که پیشتر گفته شد AngularJS صرفا یک کتابخانه یا چارچوب کاری JavaScript است. از این رو می توان با استفاده از تگ آن را به صفحات HTML افزود. AngularJS خصیصه های )attribute( HTML را از طریق directive ها )دستورها( بسط داده و با بهره گیری از عبارت ها )expression( داده ها را به HTML مقید می سازد bind( می کند(. AngularJS یک کتابخانه یا چارچوب کاری JavaScript است! همان طور که می دانید AngularJS یک چارچوب کاری )framework( است که با زبان جاوا اسکریپت نوشته شده است. AngularJS به صورت یک فایل جاوا اسکریپت ارائه شده و می توان آن را با استفاده از تگ < script >به صفحه ی وب اضافه کرد. <script src=" AngularJS قابلیت ها و امکانات زبان طراحی وب HTML را بسط می دهد! کتابخانه ی AngularJS با استفاده از دستورهای ng-directive قابلیت های HTML را بسط می دهد. دستور ng-app یک برنامه ی AngularJS را تعریف یا مشخص می کند. 11

12 کار دستور ng-model این است که مقدار کنترل های HTML همچون select input و textarea های app متصل )bind( می کند. را به داده دستور ng-bind داده های برنامه را به اشیا نمایی/دیداری (view) HTML مقید می سازد bind( می کند( به عبارت دقیقتر به کمک آن داده ها نمایش داده می شوند. مثالی از AngularJS <div ng-app=""> <p>input something in the input box:</p> <p>name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> تشریح مثال: AngularJS با بارگذاری کامل صفحه به صورت خودکار آغاز می شود. پس از آن به واسطه ی دستور ng-app به AngularJs اطالع دادیم که تگ <div> مالک برنامه ی Angularjs است. سپس با استفاده از دستور ng-model مقدار فیلد input را به متغیر برنامه "name" مقید )bind( کردیم. در پایان دستور ng-bind کاری کردیم که متغیر برنامه ی name به innerhtml تگ <p> وصل )bind( شود. AngularJS های Directive همان طور که قبال مشاهده کرده اید directive های AngularJS در واقع همان خصیصه های )attribute( HTML هستند که دارای پیشوند ng می باشند. به عنوان مثال دستور ng-init متغیرهای برنامه را مقداردهی اولیه )initialize( می کند: <div ng-app="" ng-init="firstname='john'"> <p>the name is <span ng-bind="firstname"></span></p> روشی جایگزین به همراه HTML معتبر: 12

13 <div data-ng-app="" data-ng-init="firstname='john'"> <p>the name is <span data-ng-bind="firstname"></span></p> چنانچه می خواهید کدهای HTML صفحه Valid یا معتبر باشند می توانید به جای پیشوند ng- از پیشوند data-bg- استفاده نمایید. عبارت ها (expression) AngularJS عبارت های AngularJS داخل {{ نوشته می شوند. دستور ng-init متغیرهای برنامه ی AngularJS را مقداردهی اولیه می کند: <div ng-app="" ng-init="firstname='john'"> <p>the name is <span ng-bind="firstname"></span></p> در کل عبارت ها در angularjs اطالعات را به المان های HTML مقید می سازند )منتقل می کنند( درست مشابه کاری که دستور ng-bind انجام می دهد. <div ng-app=""> <p>input something in the input box:</p> <p>name: <input type="text" ng-model="name"></p> <p>{{name</p> برنامه های )application( AngularJS ماژول های Angularjs برنامه های Angularjs را تعریف می کنند و کنترلر های Angularjs برنامه های Angularjs را مدیریت می کنند. دستور ng-app کند. اپلیکیشن مورد نظر را کنترل می کند و دستور ng-controller در حقیقت کنترلر را مشخص می <p>try to change the names.</p> <div ng-app="myapp" ng-controller="myctrl"> First Name: <input type="text" ng-model="firstname"><br> Last Name: <input type="text" ng-model="lastname"><br> <br> Full Name: {{firstname + " " + lastname 13

14 app.controller('myctrl', function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; ماژول های AngularJS اپلیکیشن را تعریف می کنند: کنترلر )controller( اپلیکیشن ها را مدیریت می کنند: app.controller('myctrl', function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; عبارت ها/ Expression در AngularJS AngularJS می کند. عبارات در )bind( مقید HTML با بهره گیری از عبارت ها داده ها را به AngularJS داخل expression {{ نوشته و درج می شوند. کار آن ها این است که مثل دستور ng-bind داده ها رو به HTML مقید )bind( می کنند و در هر جایی که قرار دارند داده ها را جایگزین خود می سازند. عبارت های AngularJS بسیار شبیه به عبارت های جاوا اسکریپت هستند بدین معنا که می توانند مقادیر نوشتاری )literal( عملگر )operator( متغیر دربر داشته باشند. <div ng-app> <p>my first expression: {{ </p> مثال : {{ یا lastname.{{ firstname + " " + حال اگر دستور ng-app را حذف کنید HTML عبارت را بدون اینکه حل کند و همان گونه که هست نمایش می دهد: <p>without the ng-app directive, HTML will display the expression as it is, without solving it.</p> <div> <p>my first expression: {{ </p> 14

15 اعداد در AngularJS اعداد AngularJS شبیه اعداد در زبان جاوا اسکریپت است: <div ng-app="" ng-init="quantity=1;cost=5"> <p>total in dollar: {{ quantity * cost </p> اکنون همین مثال را با استفاده از دستور ng-bind بکار می بریم: <div ng-app="" ng-init="quantity=1;cost=5"> <p>total in dollar: <span ng-bind="quantity * cost"></span></p> استفاده از دستور ng-init جهت مقداردهی اولیه ی متغیرها چندان رایج نیست. در مباحث بعدی به روش های دیگری برای مقداردهی اولیه خواهیم پرداخت. رشته ها در AngularJS رشته ها در AngularJS همان کاربردی را دارند که در جاوا اسکریپت دارند. <div ng-app="" ng-init="firstname='john';lastname='doe'"> <p>the full name is: {{ firstname + " " + lastname </p> اکنون همان مثال فوق را با استفاده از دستور ng-bind می نویسیم: <div ng-app="" ng-init="firstname='john';lastname='doe'"> <p>the full name is: <span ng-bind="firstname + ' ' + lastname"></span></p> اشیا در AngularJS اشیا در جاوا اسکریپت مشابه اشیا در AngularJS هستند و روش ایجاد و بکارگیری آن ها نیز یکسان است: <div ng-app="" ng-init="person={firstname:'john',lastname:'doe'"> <p>the name is {{ person.lastname </p> 15

16 حال همان مثال را در زیر مشاهده می کنید که با دستور ng-bind نوشته شده است: <div ng-app="" ng-init="person={firstname:'john',lastname:'doe'"> <p>the name is <span ng-bind="person.lastname"></span></p> آرایه ها در AngularJS آرایه ها در جاوا اسکریپت و AngularJS یکی هستند: <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>the third result is {{ points[2] </p> حال همان مثال را با استفاده از دستور ng-bind می نویسیم: مقایسه عبارات در Angularjs و JavaScript <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>the third result is <span ng-bind="points[2]"></span></p> درست مشابه عبارت ها در جاوااسکریپت عبارت های Angularjs هم می تواند حامل مقادیر نوشتاری )literal( عملگرها operator( ها( و متغیرها باشد. بر خالف عبارت در جاوااسکریپت عبارت ها Angularjs می توانند درون کدهای HTML درج گردند. عبارت Angularjs از دستورات شرطی حلقه ها و استثنا ها exception( ها( پشتیبانی نمی کند. بر خالف آن عبارت در جاوااسکریپت از تمامی موارد نام برده پشتیبانی می کند. عبارت ها در جاوااسکریپت قابلیت پشتیبانی از فیلترها را ندارند در حالی که عبارت های Angularjs از فیلترها پشتیبانی می کنند. AngularJS در Modules در AngularJS ماژول یک برنامه را تعریف می کند. 16

17 ماژول در حقیقت نقش یک ظرف برای نگهداری بخش های مختلف یک برنامه را ایفا می کند. همچنین می توان گفت که ماژول یک ظرف برای کنترلگرهای برنامه است. کنترلگرها همیشه متعلق به یک ماژول هستند. یک ماژول به همراه یک کنترگر برنامه ی زیر )"myapp"( دارای یک کنترلگر به نام )"myctrl"( است: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> {{ firstname + " " + lastname var app = angular.module("myapp", []); app.controller("myctrl", function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; </html> قرار دادن ماژول ها و کنترلگرها در فایل های جدا در برنامه های AngularJS متداول است که ماژول ها و کنترلگرها را در فایل های مجزای جاوا اسکریپت قرار می دهند. در مثال زیر فایل "myapp.js" دربردارنده ی یک ماژول برنامه است درحالی که فایل "myctrl.js" حامل کنترلگر می باشد: از پارامتر ][ در تعریف ماژول می توان به منظور تعریف ماژول های وابسته بهره گرفت. <!DOCTYPE html> <html> <head> 17

18 <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> {{ firstname + " " + lastname <script src="myapp.js"> <script src="myctrl.js"> </html> توابع می توانند فضاهای نامی سراسری را تخریب کنند در جاوااسکریپت باید از بکار بردن توابع سراسری تا حد امکان خودداری کرد زیرا آنها می توانند به راحتی توسط دیگر اسکریپت ها بازنویسی یا نابود شوند. ماژول های AngularJS با قرار دادن توابع به صورت محلی درون ماژول مربوطه این مشکل را تا حدی کاهش دهد. زمان بارگذاری کتابخانه اگرچه رایج است که در برنامه های HTML اسکریپت ها در انتهای عنصر >body< قرار داده شوند پیشنهاد می کنیم که شما فایل آدرس دهنده به کتابخانه ی AngularJS را در تگ >head< و یا در ابتدای المان >body< قرار دهید. دلیل آن این است که فراخوانی angular.module تنها می تواند پس از بارگذاری کتابخانه ترجمه )کامپایل( شود. <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="myctrl"> {{ firstname + " " + lastname var app = angular.module("myapp", []); 18

19 app.controller("myctrl", function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; </html> AngularJS ها در Directives Angular یک چارچوب کاری یا کتابخانه ی جاوا اسکریپت هست که به کمک خصیصه های نوینی به نام Directive ها)دستور ها( به برنامه نویس یا طراح وب این اجازه را می دهد که HTML را بسط داده و قابلیت های آن را گسترش دهد. Angular Directives Directive ها با استفاده از پیشوند ng خصیصه های HTML را بسط می دهند. دستور ng-app یک برنامه ی AngularJS را مقدار دهی اولیه )آغاز و تعریف( می کند. دستور ng-init داده های برنامه data( )app را مقدار دهی اولیه می کند. دستور ng-model مقدار کنترل های دریافت ورودی HTML از قبیل input و select و textarea را به داده های برنامه مقید bind می کنند. <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="" ng-init="firstname='john'"> <p>input something in the input box:</p> <p>name: <input type="text" ng-model="firstname"></p> <p>you wrote: {{ firstname </p> </html> 19

20 دستور ng-app همچنین به AngularJS اطالع می دهد که المان div>< صاحب برنامه ی AngularJS می باشد. اتصال داده Binding( )Data عبارت {{ firstname که در مثال باال مشاهده کردید یک عبارت اتصال داده AngularJS است. اتصال داده یا data binding عبارت های AngularJS را با داده های AngularJS هماهنگ و منطبق )synchronize( می سازد. به طور مثال firstname {{ با ng-model="firstname" برابر می باشد. اند: در مثال زیر مشاهده می کنید که دو فیلد دریافت متن field( )text با دستور ng-model مساوی و برابر شده <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div data-ng-app="" data-ng-init="quantity=1;price=5"> <h2>cost Calculator</h2> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> <p><b>total in dollar:</b> {{quantity * price</p> </html> همان طور که در مبحث پیشین مطرح شد استفاده از دستور ng-init برای مقداردهی زیاد توصیه نمی شود. در مباحث آینده با روش بهتری برای مقدار دهی اولیه ی آشنا خواهیم شد. تکرار کردن المان های HTML دستور ng-repeat به منظور تکرار کردن المان HTML بکار رفته و عملکردی مشابه حلقه را دارد: 20

21 <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div data-ng-app="" data-ng-init="names=['jani','hege','kai']"> <p>looping with ng-repeat:</p> <ul> <li data-ng-repeat="x in names"> {{ x </li> </ul> </html> در زیر از دستور ng-repeat بر روی یک آرایه از اشیا استفاده شده است: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="" ng-init="names=[ {name:'jani',country:'norway', {name:'hege',country:'sweden', {name:'kai',country:'denmark']"> <p>looping with objects:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country </li> </ul> </html> Update Create برای آن دسته از برنامه های کاربردی که نیاز به پیاده کردن عملیات AngualarJS Delete Read )ایجاد خواندن آپدیت حذف( بر روی پایگاه داده دارند بسیار مناسب می باشد. کافی است فرض کنید که این اشیا سطرهایی از یک پایگاه داده می باشند. 21

22 دستور ng-app این directive در واقع عنصر آغازین element( )root یک برنامه ی کاربردی را تعریف می کند. ng-app directive زمانی که صفحه بارگذاری می شود به صورت خودکار راه اندازی )auto-bootstrap( و مقدار دهی اولیه می شود. در فواصل آینده یاد خواهید گرفت چگونه ng-app می تواند به منظور اتصال کد ماژول ها دارای یک مقدار )مانند )ng-app="mymodule" باشد. دستور in-init این دستور مقادیر اولیه ی برنامه را مشخص می کند. استفاده از in-init برای مقداردهی اولیه چندان متداول نیست اغلب از یک کنترلر یا ماژول برای initialization استفاده می کنیم. در مباحث بعدی درک بهتری نسبت به کنترلر ها و ماژول ها بدست خواهید آورد. دستور ng-model دستور ng-model مقادیر کنترل های دریافت کننده ورودی داده های برنامه ی کاربردی متصل )bind( می کند. HTML همچون select input و textarea را به دستور ng-model همچنین قادر به انجام عملیات زیر می باشد: اعتبار سنجی داده های برنامه ی کاربردی از جمله عدد ایمیل و اطالعات الزم را بر عهده می گیرد. وضعیت داده های برنامه را مشخص می کند: نامعتبر dirty )دستخوش تغییر قرار گرفته( خطا و دستکاری شده )touched( و غیره.... کالس های css را برای المان های HTML فراهم می نماید. 22

23 المان های HTML را به فرم های HTML مقید )bind( می کند. دستور ng-repeat دستور ng-repeat به ازای هر آیتم موجود در یک مجموعه یا آرایه عناصر HTML را clone )تکثیر( می کند. دایرکتیو AngularJS ng-model دایرکتیو ng-mode مقادیر کنترلی )input,select,textarea(html را به داده های برنامه پیوند می دهد. دایرکتیو ng-model شما با استفاده از دایرکتیو ng-model می توانید مقدار یک input را به متغیری که در AngularJS ساخته شده است پیوند دهید. <div ng-app="myapp" ng-controller="myctrl"> Name: <input ng-model="name"> app.controller('myctrl', function ($scope) { $scope.name = "John Doe"; <p>use the ng-model directive to bind the value of the input field to a property made in the controller.</p> پیوند دو طرفه پیوند می تواند دو طرفه باشد یعنی اگر کاربر مقدار ورودی را در input تغییر دهد مقدار نظیر آن در AngularJS نیز تغییر کند: <div ng-app="myapp" ng-controller="myctrl"> Name: <input ng-model="name"> <h1>you entered: {{name</h1> app.controller('myctrl', function ($scope) { $scope.name = "John Doe"; 23

24 <p>change the name inside the input field, and you will see the name in the header changes accordingly.</p> اعتبارسنجی مقدار input کاربر دایرکتیو ng-model می تواند مقدار ورودی یک برنامه را اعتبارسنجی کند. به عنوان مثال مقدار ورودی یک input را صرفا از نوع number یا قرار دهد و یا مقدار ورودی را الزامی )required( کند. <form ng-app="" name="myform"> <input type=" " name="myaddress" ng-model="text"> <span ng-show="myform.myaddress.$error. ">not a valid address</span> </form> <p>enter your address in the input field. AngularJS will display an errormessage if the address is not an e- mail.</p> در مثال باال اگر عبارت داخل اتربیوت ng-show مقدار true برگرداند span نمایش داده خواهد شد. نکته:اگر اتربیوت ng-model وجود نداشته باشد AngularJS خود می سازد. وضعیت یک برنامه کاربردی Status( )Application به صورت پیش فرض یک ng-model برای error یا touched دایرکتیو ng-model می تواند وضعیت داده های یک برنامه را به صورت dirty invalid مشخص کند. <form ng-app="" name="myform" ng-init="mytext = 'post@myweb.com'"> <input type=" " name="myaddress" ng-model="mytext" required> <p>edit the address, and try to change the status.</p> <h1>status</h1> <p>valid: {{myform.myaddress.$valid (if true, the value meets all criteria).</p> <p>dirty: {{myform.myaddress.$dirty (if true, the value has been changed).</p> <p>touched: {{myform.myaddress.$touched (if true, the field has been in focus).</p> </form> کالس های CSS دایرکتیو ng-model با در نظر گرفتن وضعیت المان های HTML می تواند خاصیت کالس های Css را به آنها اضافه کند. <form ng-app="" name="myform"> Enter your name: <input name="myname" ng-model="mytext" required> </form> <p>edit the text field and it will get/lose classes according to the status.</p> <p><b>note:</b> A text field with the "required" attribute is not valid when it is empty.</p> 24

25 دایرکتیو ng-model با توجه با وضعیت فیلد های فرم می تواند کالس های زیر را اضافه و یا حذف کند. ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine لیست انتخاب )Dropdown( در AngularJS AngularJS به شما این امکان را می دهد تا بر اساس لیستی از عناصر درون یک آرایه و یا یک شی) object ( یک dropdown بسازید. ساختن یک dropdown با استفاده از ng-options اگر می خواهید با استفاده از یک object یا یک آرایه در AngularJS یک dropdown بسازید باید از دایرکتیو ng-option استفاده کنید. به عنوان مثال: <div ng-app="myapp" ng-controller="myctrl"> <select ng-model="selectedname" ng-options="x for x in names"></select> app.controller('myctrl', function ($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; <p>this example shows how to fill a dropdown list using the ng-options directive.</p> مقایسه ng-options با ng-repeat شما همچنین می توانید از دایرکتیو ng-repeat برای ساخت یک dropdown مشابه استفاده کنید: 25 <div ng-app="myapp" ng-controller="myctrl"> <select> انتخاب< option > < option />کنید <option ng-repeat="x in names">{{x</option>

26 </select> app.controller('myctrl', function ($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; <p>this example shows how to fill a dropdown list using the ng-repeat directive.</p> دایرکتیو ng-repeat یک بالک از کد HTML را برای هر عنصر داخل آرایه تکرار می کند و به همین دلیل می توان از آن برای ساخت گزینه های یک dropdown استفاده کرد اما دایرکتیو ng-options به صورت اختصاصی برای ساختن گزینه های یک dropdown ساخته شده است و همچنین یک مزیت بزرگ نسبت به ng-repeat دارد. Dropdown هایی که با ng-options ساخته می شوند گزینه های انتخاب شده را یک object و همچنین dropdown هایی که با ng-repeat ساخته می شوند گزینه های انتخاب شده را یک رشته در نظر می گیرند. $scope.cars = [ ]; برای چه باید استفاده کنیم فرض کنید مانند شکل زیر یک آرایه ای از object ها به صورت زیر در اختیار داریم: { model: "Ford Mustang", color: "red", { model: "Fiat 500", color: "white", { model: "Volvo XC90", color: "black" دایرکتیو ng-repeat محدودیت هایی دارد و هر گزینه انتخاب شده را یک رشته در نظر می گیرد: <div ng-app="myapp" ng-controller="myctrl"> <p>select a car:</p> <select ng-model="selectedcar"> <option ng-repeat="x in cars" value="{{x.model">{{x.model</option> </select> <h1>you selected: {{selectedcar</h1> app.controller('myctrl', function ($scope) { $scope.cars = [ { model: "Ford Mustang", color: "red", { model: "Fiat 500", color: "white", { model: "Volvo XC90", color: "black" 26

27 ]; <p>when you use the ng-repeat directive to create dropdown lists, the selected value must be a string.</p> <p>in this example you will have to choose between the color or the model to be your selected value.</p> زمانی که از دایرکتیو ng-options استفاده می کنید هر گزینه انتخاب شده را گیرد: یک object در نظر می <div ng-app="myapp" ng-controller="myctrl"> <p>select a car:</p> <select ng-model="selectedcar" ng-options="x.model for x in cars"></select> <h1>you selected: {{selectedcar.model</h1> <p>it's color is: {{selectedcar.color</p> app.controller('myctrl', function ($scope) { $scope.cars = [ ]; { model: "Ford Mustang", color: "red", { model: "Fiat 500", color: "white", { model: "Volvo XC90", color: "black" <p>when you use the ng-options directive to create dropdown lists, the selected value can be an object.</p> <p>in this example you can display both the model and the color of the selected element.</p> گزینه های انتخاب شده به صورت object اطالعات بیشتری درباره ی آن گزینه در خود نگه داری می کند و برنامه ی شما را انعطاف پذیرتر خواهد کرد. در این مقاله ما از دایرکتیو ng-options استفاده می کنیم. منبع داده) Source )Data به صورت یک object در مثال هایی که در باال گفته شد data source ما data source استفاده کنیم. یک آرایه بود اما ما می توانیم از object هم به عنوان فرض کنید یک object جفت مقدار ارزشی pairs( )key-value در اختیار داریم: <div ng-app="myapp" ng-controller="myctrl"> <p>select a car:</p> <select ng-model="selectedcar" ng-options="x for (x, y) in cars"></select> <h1>you selected: {{selectedcar</h1> <p>this example demonstrates the use of an object as the data source when creating a dropdown list.</p> 27

28 app.controller('myctrl', function ($scope) { $scope.cars = { car01: "Ford", car02: "Fiat", car03: "Volvo" بیان اتربیوت ng-options برای object ها مقداری متفاوت است. در مثال زیر از یک object به عنوان data source استفاده شده است و x بیانگر کلید) key ( و ( value )بیانگر y مقدار می باشد: <div ng-app="myapp" ng-controller="myctrl"> <p>select a car:</p> <select ng-model="selectedcar" ng-options="x for (x, y) in cars"></select> <h1>you selected: {{selectedcar.brand</h1> <h2>model: {{selectedcar.model</h2> <h3>color: {{selectedcar.color</h3> <p>note that the selected value represents an object.</p> app.controller('myctrl', function ($scope) { $scope.cars = { car01: { brand: "Ford", model: "Mustang", color: "red", car02: { brand: "Fiat", model: "500", color: "white", car03: { brand: "Volvo", model: "XC90", color: "black" در key-value pair گزینه انتخاب شده همیشه value می باشد. value در key-value pair می تواند یک object باشد. در مثال زیر خواهید دید که مقدار انتخاب شده در value key-value pair و فقط یک مرتبه به صورت object خواهد بود. <div ng-app="myapp" ng-controller="myctrl"> <p>select a car:</p> <select ng-model="selectedcar" ng-options="y.brand for (x, y) in cars"></select> <h1>you selected: {{selectedcar.brand</h1> <h2>model: {{selectedcar.model</h2> <h3>color: {{selectedcar.color</h3> <p>the visible text inside the dropdown list can also be a property of the value object.</p> 28

29 app.controller('myctrl', function ($scope) { $scope.cars = { car01: { brand: "Ford", model: "Mustang", color: "red", car02: { brand: "Fiat", model: "500", color: "white", car03: { brand: "Volvo", model: "XC90", color: "black" AngularJS در Controllerها کنترلگرها در واقع داده های برنامه را مدیریت یا کنترل می کنند. کنترلگرهای AngularJS همان اشیای منظم و رایج JavaScript می باشند. controller ها کالسهای جاوا اسکریپت هستند. زمانی که کاربر با برنامه تعامل برقرار می کند controller پاسخگوی مستقیم دستورات کاربر می باشد و مدل را تغییر می دهد. به کنترلگرها بخش منطق برنامه نیز گفته می شود. AngularJS Controllers برنامه های AngularJS توسط کنترلگرها مدیریت می شوند. دستور ng-controller در حقیقت کنترلگر برنامه ی مورد نظر را تعریف می کند. یک کنترلر درواقع یک شی جاوااسکریپت است که به واسطه ی یک سازنده ی شی constructor( )object ساخته شده است. <div ng-app="myapp" ng-controller="myctrl"> First Name: <input type="text" ng-model="firstname"><br> Last Name: <input type="text" ng-model="lastname"><br> <br> Full Name: {{firstname + " " + lastname 29

30 app.controller('myctrl', function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; تشریح برنامه ی فوق برنامه ی مورد نظر به وسیله ی دستور یا ng-app="myapp" directive اعالن شده است. این برنامه داخل عنصر >div< کار می کند. خصیصه ی ng-controller="myctrl" یک directive )دستور( AngularJS می باشد و یک کنترلگر را مشخص می کند. تابع myctrl یک تابع جاوا اسکریپت است. AngularJS به وسیله ی شی $scope کنترلگر مورد نظر را فرامی خواند. $scope در AngularJS همان شی برنامه ی مورد نظر می باشد که حاوی متغیرها و توابع برنامه می باشد. کنترلگر مورد نظر دو خاصیت )متغیر( را داخل شی scope ایجاد می کند)متغیرهای firstname و.)lastName دستور ng-model فیلدهای دریافت کننده ی ورودی را به خاصیت های کنترل مورد نظر مقید/ bind می کند) firstname و.)lastName متدهای کنترلگر نمونه ی باال یک شی کنترلگر را به همراه دو خاصیت نمایش می دهد: firstname و.lastName یک کنترلگر همچنین می تواند دارای توابع یا متدهایی باشد)متغیرهایی به عنوان تابع(: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> 30

31 </head> <body> <div ng-app="myapp" ng-controller="personctrl"> First Name: <input type="text" ng-model="firstname"><br> Last Name: <input type="text" ng-model="lastname"><br> <br> Full Name: {{fullname() app.controller('personctrl', function ($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; $scope.fullname = function () { return $scope.firstname + " " + $scope.lastname; </html> تعریف کنترلگرها در فایل های خارجی در برنامه های بزرگ اغلب کنترلگرها را درون فایل های خارجی ذخیره می کنند. کافی است کد بین دو تگ باز و بسته ی را درون فایل خارجی به نام personcontroller.js جای گذاری کنید: angular.module('myapp', []).controller('personctrl', function ($scope) { $scope.firstname = "John", $scope.lastname = "Doe", $scope.fullname = function () { return $scope.firstname + " " + $scope.lastname; <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="personctrl"> First Name: <input type="text" ng-model="firstname"><br> Last Name: <input type="text" ng-model="lastname"><br> 31

32 <br> Full Name: {{firstname + " " + lastname <script src="personcontroller.js"> </html> مثال دیگر برای مثال بعدی یک فایل کنترلگر جدید ایجاد می کنیم: angular.module('myapp', []).controller('namesctrl', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway', { name: 'Hege', country: 'Sweden', { name: 'Kai', country: 'Denmark' ]; فایل مورد نظر را به این نام ذخیره کنید: :namescontroller.js حال فایل کنترلگر را داخل یک برنامه بکار ببرید: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="namesctrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country </li> </ul> <script src="namescontroller.js"> </html> محدوده )Scope( در AngularJS Scope را می توان به چند طریق تعریف کرد: 32

33 به قسمتی که )view( HTML و )Controller( JavaScript را بهم پیوند می دهد Scope می گویند. به یک object با ویژگی ها و متدهای قابل دسترس نیز Scope می گویند. Scope هم برای view و هم برای Controller قابل دسترس می باشد. چگونه از Scope استفاده کنیم زمانی که شما یک Controller در AngularJS ایجاد می کنید یک $scope object به عنوان argument ایجاد می شود. در مثال زیر ویژگی های ساخته شده در Controller می توانند به view ارجاع داده شوند. <div ng-app="myapp" ng-controller="myctrl"> <h1>{{carname</h1> app.controller('myctrl', function ($scope) { $scope.carname = "Volvo"; <p>the property "carname" was made in the controller, and can be referred to in the view by using the {{ brackets.</p> هرگاه به $scope در Controller ویژگی هایی اضافه کنیم )HTML(view می تواند به این ویژگی ها دسترسی داشته باشد. شما نباید از پیشوند $scope در view استفاده کنید بلکه فقط باید به نام آن ویژگی ارجاع دهید به عنوان مثال باید به صورت {{carname بنویسید. درک کردن Scope یک برنامه کاربردی AngularJS شامل بخش های زیر می باشد: View که شامل کدهای Html است. Model که view مربوط به آن دسترسی دارد. Controller که با استفاده از توابع JavaScript اطالعات را ایجاد کند تغییر دهد حذف کند و یا کنترل کند. Scope یک object با ویژگی ها و متدهایی است که هم برای view و Controller قابل دسترسی باشد. به عنوان مثال هر گاه شما در view تغییراتی ایجاد کنید model و Controller به روز رسانی می شوند. <div ng-app="myapp" ng-controller="myctrl"> <input ng-model="name"> <h1>my name is {{name</h1> app.controller('myctrl', function ($scope) { $scope.name = "John Doe"; 33

34 <p>when you change the name in the input field, the changes will affect the model, and it will also affect the name property in the controller.</p> Scope خود را بشناسید این نکته بسیار مهم است که شما بدانید از کدام Scope باید استفاده کنید. در دو مثال قبلی تنها یک Scope وجود داشت و شناختن Scope کار دشواری نبود اما برای برنامه های بزرگتر Section هایی از HTML DOM وجود دارد که برای هر Scope یکتای خود قابل دسترسی می باشد. به عنوان مثال هرگاه از دایرکتیو ng-repeat استفاده می کنیم هر تکرار به همان دسترسی دارد. object تکرار شده <div ng-app="myapp" ng-controller="myctrl"> <ul> <li ng-repeat="x in names">{{x</li> </ul> app.controller('myctrl', function ($scope) { $scope.names = ["Emil", "Tobias", "Linus"]; <p>the variable "x" has a different value for each repetition, proving that each repetition has its own scope.</p> المان هر به همان objectتکرارشونده دسترسی دارد. در این مورد یک رشته با x نشان داده شده است. 34 Scope ریشه هر برنامه ی کاربردی یک $rootscope دارد که Scope ساخته شده در المان Html آن دارای دایرکتیو ng-app می باشد. rootscope در کل برنامه قابل دسترسی است و اگر یک متغیر دارای نام های مشابه در Current Scope و rootscope باشد برنامه یکی از آنها را استفاده می کند. به عنوان مثال یک متغیر به نام color هم در Controller Scope و هم در rootscope وجود دارد. <body ng-app="myapp"> <p>the rootscope's favorite color:</p> <h1>{{color</h1> <div ng-controller="myctrl"> <p>the scope of the controller's favorite color:</p> <h1>{{color</h1> <p>the rootscope's favorite color is still:</p>

35 <h1>{{color</h1> app.run(function ($rootscope) { $rootscope.color = 'blue'; app.controller('myctrl', function ($scope) { $scope.color = "red"; <p>notice that controller's color variable does not overwrite the rootscope's color value.</p> فیلترها در AngularJS فیلترها را می توان با یک کاراکتر " " به عبارات )expression( و directive (دستورات ( اضافه کرد. با بهره گیری از فیلترهای AngularJS می توان داده ها را تبدیل کرد: شرح فیلتر عدد را با فرمت پول رایج نمایش می دهد/فرمت عدد به پول رایج. currency filter یک زیر مجموعه از آیتم های موجود در یک آرایه را انتخاب کرده و برمی گرداند. فرمت یک رشته را به حروف کوچک تبدیل می کند و آن را با حروف کوچک نمایش می lowercase دهد. orderby آرایه را بر اساس یک رشته مرتب می سازد. uppercase فرمت رشته را به حروف بزرگ تبدیل می کند. 35

36 افزودن فیلتر به عبارت ها همان طور که باال نیز گفته شد یک فیلتر را می توان به وسیله ی کاراکتر " " به عبارت مد نظر اضافه کرد. در دو مثال بعدی از همان کنترلگر person درس پیشین استفاده می کنیم. <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="personctrl"> <p>the name is {{ lastname uppercase </p> <script src="personcontroller.js"> </html> <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="personctrl"> <p>the name is {{ lastname lowercase </p> <script src="personcontroller.js"> </html> فیلتر uppercase رشته ها را با حروف بزرگ نمایش می دهد: فیلتر lowercase رشته ها را با حروف کوچک تبدیل کرده و نمایش می دهد: فیلتر currency فرمت یک عدد را به فرمت پول رایج تبدیل کرده یا به عبارتی یک عدد را به صورت )در قالب( پول رایج نمایش می دهد: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> 36

37 </head> <body> <div ng-app="myapp" ng-controller="costctrl"> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> <p>total = {{ (quantity * price) currency </p> app.controller('costctrl', function ($scope) { $scope.quantity = 1; $scope.price = 9.99; </html> <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="namesctrl"> <p>looping with objects:</p> <ul> <li ng-repeat="x in names orderby:'country'"> {{ x.name + ', ' + x.country </li> </ul> <script src="namescontroller.js"> </html> افزودن فیلتر به Directive ها فیلتر را می توان با استفاده از کاراکتر " " به directive مورد نظر ضمیمه کرد. orderby یک آرایه را به وسیله ی یک عبارت )expression( مرتب می سازد: فیلتر کردن ورودی یک filter که برای فیلتر کردن و انتخاب ورودی های خاص در نظر گرفته شده است به واسطه ی یک کاراکتر 37

38 " " به directive پیوست شده و به دنبال آن فیلتر مورد نظر کاراکتر دو نقطه " : " و نام مدل تایپ می شوند. Filter یک تعداد مشخص یا زیرمجموعه ای از آیتم های آرایه را انتخاب کرده و برمی گرداند: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="namesctrl"> <p>filtering input:</p> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names filter:test orderby:'country'"> {{ (x.name uppercase) + ', ' + x.country </li> </ul> <script src="namescontroller.js"> </html> سرویس های AngularJS شما در AngularJS می توانید سرویس شخصی برای خودتان بسازید و یا از سرویس های پیش ساخته زیادی که در اختیار دارید استفاده کنید. سرویس چیست در AngularJS سرویس یک تابع و یا object است که برای برنامه کاربردی AngularJS قابل دسترس و یا محدود شده باشد. AngularJS حدود 11 سرویس پیش ساخته شده دارد که یکی از آنها سرویس $location می باشد. سرویس $location دارای متدهایی است که اطالعات موقعیت مکانی را به صفحه وب page( )Web ارسال می کند. در مثال زیر از $location به عنوان یک Controller استفاده شده است: <div ng-app="myapp" ng-controller="myctrl"> <p>the url of this page is:</p> <h3>{{myurl</h3> <p>this example uses the built-in $location service to get the absolute url of the page.</p> app.controller('myctrl', function ($scope, $location) { 38

39 $scope.myurl = $location.absurl(); به خاطر داشته باشید که سرویس $location به عنوان یک argument در Controller تعریف می شود. به منظور استفاده از سرویس در Controller باید آن را به صورت وابسته تعریف کرد. چرا از سرویس ها استفاده می کنیم سرویس $location را در نظر بگیرید. به نظر می رسد که به جای آن می توان از objectهایی که در DOM هستند مانند window.location استفاده کرد البته می توان این کار را انجام داد اما در برنامه AngularJS شما محدودیت هایی خواهید داشت. AngularJS دائما برنامه شما را نظارت می کند و برای مدیریت تغییرات و ویژگی های رخدادها ترجیح می دهد شما از $location به جای window.location استفاده کنید. سرویس $http سرویس $http یکی از سرویس های پرکاربرد در برنامه های AngularJS می باشد.این سرویس یک درخواست به سرور ارسال می کند و به شما اجازه می دهد پاسخ برگشتی را مدیریت کنید.در مثال بسیار ساده زیر از سرویس $http برای ارسال درخواست به سرور استفاده شده است. <div ng-app="myapp" ng-controller="myctrl"> <p>today's welcome message is:</p> <h1>{{mywelcome</h1> <p>the $http service requests a page on the server, and the response is set as the value of the "mywelcome" variable.</p> app.controller('myctrl', function ($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.mywelcome = response.data; سرویس $timeout سرویس $timeout نمونه Angular تابع window.settimeout می باشد. در مثال زیر بعد از دو ثانیه یک پیغام جدید به نمایش در خواهد آمد. 39 <div ng-app="myapp" ng-controller="myctrl"> <p>this header will change after two seconds:</p> <h1>{{myheader</h1>

40 <p>the $timeout service runs a function after a sepecified number of milliseconds.</p> app.controller('myctrl', function ($scope, $timeout) { $scope.myheader = "Hello World!"; $timeout(function () { $scope.myheader = "How are you today?";, 2000); سرویس $interval سرویس $interval نمونه Angular تابع window.setinterval می باشد. در مثال زیر در هر ثانیه زمان را نمایش خواهد داد. <div ng-app="myapp" ng-controller="myctrl"> <p>the time is:</p> <h1>{{thetime</h1> <p>the $interval service runs a function every specified millisecond.</p> app.controller('myctrl', function ($scope, $interval) { $scope.thetime = new Date().toLocaleTimeString(); $interval(function () { $scope.thetime = new Date().toLocaleTimeString();, 1000); 40 ساختن سرویس شخصی برای ساختن یک سرویس شخصی سرویس خود را به ماژول متصل کنید. در مثال زیر یک سرویس به نام hexafy می سازیم: app.service('hexafy', function () { this.myfunc = function (x) { return x.tostring(16); زمانی که یک فیلتر تعریف می کنید برای استفاده از سرویس شخصی ساخته شده ی خود آن را به صورت وابسته اضافه کنید. در مثال زیر برای تبدیل عدد صحیح به عدد هگزا دسیمال از سرویس hexafy که قبال ساختیم استفاده کرده ایم.

41 <div ng-app="myapp" ng-controller="myctrl"> <p>the hexadecimal value of 255 is:</p> <h1>{{hex</h1> <p>a custom service whith a method that converts a given number into a hexadecimal number.</p> app.service('hexafy', function () { this.myfunc = function (x) { return x.tostring(16); app.controller('myctrl', function ($scope, hexafy) { $scope.hex = hexafy.myfunc(255); 41 استفاده کردن از یک سرویس دلخواه داخل یک فیلتر زمانی که شما یک سرویس را طراحی می کنید و آن را به برنامه خود متصل می کنید می توانید از آن در هر filter directive controller و یا حتی داخل سرویس های دیگر استفاده کنید. برای استفاده از سرویس داخل یک فیلتر بعد از تعریف کردن فیلتر سرویس را به صورت وابسته به آن اضافه کنید. در مثال زیر از سرویس hexafy داخل فیلتر myformat استفاده شده است. <div ng-app="myapp"> Convert the number 255, using a custom made service inside a custom made filter: <h1>{{255 myformat</h1> app.service('hexafy', function () { this.myfunc = function (x) { return x.tostring(16); app.filter('myformat', ['hexafy', function (hexafy) { return function (x) { return hexafy.myfunc(x); ; ]); شما می توانید از فیلتر در هنگام نمایش دادن مقادیر از یک object و یا یک آرایه استفاده کنید. <div ng-app="myapp" ng-controller="myctrl"> <p>use a filter when displayin the array [255, 251, 200]:</p> <ul> <li ng-repeat="x in counts">{{x myformat</li>

42 </ul> <p>this filter uses a service that converts numbers into hexadecimal values.</p> app.service('hexafy', function () { this.myfunc = function (x) { return x.tostring(16); app.filter('myformat', ['hexafy', function (hexafy) { return function (x) { return hexafy.myfunc(x); ; ]); app.controller('myctrl', function ($scope) { $scope.counts = [255, 251, 200]; $http و سرویس AngularJS $http یک سرویس AngularJS است که جهت خواندن داده ها از سرورهای راه دور server( )remote بکار می رود. فراهم کردن دادن داده ها داده ی زیر می تواند به وسیله ی یک سرویس دهنده ی وب server( )web ارائه شود: { "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany", { "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden", { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", 42

43 43 "Country" : "Mexico", { "Name" : "Ernst Handel", "City" : "Graz", "Country" : "Austria", { "Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid", "Country" : "Spain", { "Name" : "Galería del gastrónomo", "City" : "Barcelona", "Country" : "Spain", { "Name" : "Island Trading", "City" : "Cowes", "Country" : "UK", { "Name" : "Königlich Essen", "City" : "Brandenburg", "Country" : "Germany", { "Name" : "Laughing Bacchus Wine Cellars", "City" : "Vancouver", "Country" : "Canada", { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy", { "Name" : "North/South", "City" : "London", "Country" : "UK", { "Name" : "Paris spécialités", "City" : "Paris", "Country" : "France", { "Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque",

44 "Country" : "USA", { "Name" : "Simons bistro", "City" : "København", "Country" : "Denmark", { "Name" : "The Big Cheese", "City" : "Portland", "Country" : "USA", { "Name" : "Vaffeljernet", "City" : "Århus", "Country" : "Denmark", { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" ] AngularJS $http یک سرویس اصلی است که برای خواندن اطالعات از سرویس دهنده های وب کاربرد دارد. $http.get(url) یک تابع است که برای خواندن داده های سرویس دهنده مورد استفاده قرار می گیرد. <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country </li> </ul> app.controller('customersctrl', function ($scope, $http) { $http.get("customers.htm") 44

45 .then(function (response) { $scope.names = response.data.records; </html> شرح برنامه: دستور ng-app همان طور که در فواصل پیشین شرح داده شد برنامه ی AngularJS را تعریف کرده و به عبارتی عنصر آغازین را مشخص می کند. برنامه ی حاضر درون یک تگ >div< اجرا می شود. ng-controller را می توان شی کنترلگر object( )controller نامید. تابع customersctrl یک سازنده ی شی constructor( )object متعارف جاوا اسکریپت است. AngularJS با استفاده از اشیا $scope و $http تابع customersctrl را فرامی خواند. $scope در واقع شی application است )همان مالک و متغیرها و توابع برنامه(. سرویس $http یک شی XMLHttpRequest است که توسط آن داده های خارجی را درخواست می کنید. $http.get() اطالعات json را از آدرس می خواند. در صورت موفقیت کنترلگر مورد نظر یک خاصیت )names( را در شی scope با داده های JSON از سرویس دهنده ایجاد می کند. جداول در AngularJS دستور ng-repeat بهترین گزینه برای نمایش دادن جدول ها می باشد. نمایش دادن داده ها در جدول نمایش دادن جدول ها توسط AngularJS امر بسیار ساده ای می باشد: <!DOCTYPE html> 45

46 <html> <head> <title></title> <script src="angular.js"> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.name </td> <td>{{ x.country </td> </tr> </table> app.controller('customersctrl', function ($scope, $http) { $http.get("customers.html").then(function (response) { $scope.names = response.data.records; </html> نمایش دادن اطالعات به وسیله ی استایل css به منظور بهتر کردن ظاهر آن می توان مقداری css به صفحه اضافه کرد: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; table tr:nth-child(odd) { background-color: #f1f1f1; table tr:nth-child(even) { background-color: #ffffff; </style> </head> <body> 46

47 <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.name </td> <td>{{ x.country </td> </tr> </table> app.controller('customersctrl', function ($scope, $http) { $http.get("customers.html").then(function (response) { $scope.names = response.data.records; </html> به منظور مرتب سازی جدول مورد نظر الزم است یک فیلتر orderby اضافه کنید: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; table tr:nth-child(odd) { background-color: #f1f1f1; table tr:nth-child(even) { background-color: #ffffff; </style> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names orderby : 'Country'"> <td>{{ x.name </td> <td>{{ x.country </td> </tr> </table> 47

48 app.controller('customersctrl', function ($scope, $http) { $http.get("customers.html").then(function (response) { $scope.names = response.data.records; </html> نمایش دادن به وسیله ی فیلتر uppercase جهت نمایش دادن با حروف بزرگ کافی است فیلتر uppercase را اضافه کنید: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; table tr:nth-child(odd) { background-color: #f1f1f1; table tr:nth-child(even) { background-color: #ffffff; </style> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.name </td> <td>{{ x.country uppercase </td> </tr> </table> app.controller('customersctrl', function ($scope, $http) { $http.get("customers.html").then(function (response) { $scope.names = response.data.records; 48

49 </html> نشان دادن اندیس جدول) index $( به منظور نمایش دادن اندیس جدول الزم است یک تگ >td< همراه با $index اضافه نمایید: <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> <style> table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; table tr:nth-child(odd) { background-color: #f1f1f1; table tr:nth-child(even) { background-color: #ffffff; </style> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names"> <td>{{ $index + 1 </td> <td>{{ x.name </td> <td>{{ x.country </td> </tr> </table> app.controller('customersctrl', function ($scope, $http) { $http.get(" (response) { $scope.names = response.data.records; </html> 49

50 استفاده از $even و $odd <!DOCTYPE html> <html> <head> <title></title> <script src="angular.js"> <style> table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; </style> </head> <body> <div ng-app="myapp" ng-controller="customersctrl"> <table> <tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1"> {{ x.name </td> <td ng-if="$even"> {{ x.name </td> <td ng-if="$odd" style="background-color:#f1f1f1"> {{ x.country </td> <td ng-if="$even"> {{ x.country </td> </tr> </table> app.controller('customersctrl', function ($scope, $http) { $http.get("customers.html").then(function (response) { $scope.names = response.data.records; </html> Twitter Bootstrap و AngularJS 50

51 Bootstrap یک صفحه ی سبک دهی sheet( )style پرطرفدار است. مقاله ی حاضر نحوه ی استفاده از angular به همراه bootstrap را به شما آموزش می دهد. BootStrap برای اضافه کردن bootstrap به برنامه ی AngularJS کد زیر را به بخش head از صفحه ی HTML خود ضمیمه کنید: <link rel="stylesheet" href=" در زیر یک مثال HTML کامل وجود دارد که در آن تمام دستورات AngularJS و BootStrap شرح داده شده است: کد HTML <div class="container"> <h3>users</h3> <table class="table table-striped"> <thead> <tr> <th>edit</th> <th>first Name</th> <th>last Name</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> <button class="btn" ng-click="edituser(user.id)"> <span class="glyphicon glyphicon-pencil"></span> Edit </button> </td> <td>{{ user.fname </td> <td>{{ user.lname </td> </tr> </tbody> </table> <hr> <button class="btn btn-success" ng-click="edituser('new')"> <span class="glyphicon glyphicon-user"></span> Create New User </button> <hr> <form class="form-horizontal" ng-hide="hideform"> 51